//短视频播放
document.querySelector('.video ul').onclick=function(){
    document.body.style.overflow='hidden'
    document.querySelector('.video-wrapper').style.display='block'

}
// 关闭短视频播放
document.querySelector('.video-wrapper .close').onclick=function(){
    document.body.style.overflow='auto'
    document.querySelector('.video-wrapper').style.display='none'
    document.querySelector('.video-wrapper .video').pause()

}

// 循环打印56张图片
// 更改图片位置
let arr=[
    {left:0,top:0,},
    {left:254,top:0,},
    {left:254*2,top:0,},
    {left:254*3,top:0,},
]

let videoHeight=0

// fou循环

function waterFall(){
    for(let num=1;num<=56;num++){
        //造li标签，追加到页面
        let liobj=document.createElement('li')
        liobj.style.position='absolute'
        liobj.style.display='none'
        liobj.innerHTML=`
        <div>
            <img src="./assets/imgs2/${num}.jpg" alt="">
        </div>
        <span>${num}初秋絮语，用音乐记下你的点点滴滴</span>
        <p>
            <i class="iconfont icon-aixin"></i>${num}${num}.6w喜欢
        </p>
        `
        // let ulobj=document.querySelector('.video ul')
        // console.log(ulobj)
        document.querySelector('.video ul').appendChild(liobj)
        
    
        // 更改图片位置
        liobj.querySelector('img').onload=function(){  //图片加载完毕，移动端常用
            let minHeightIndex=0
            arr.forEach((item,i)=>{
                if(arr[minHeightIndex].top>item.top){
                    minHeightIndex=i
                }
            })
                liobj.style.display='block'  //图片显示
                liobj.style.left=arr[minHeightIndex].left+'px'
                liobj.style.top=arr[minHeightIndex].top+'px'
                arr[minHeightIndex].top+=liobj.offsetHeight   
                
                //记录最后一章图片的位置
                videoHeight=arr[minHeightIndex].top
            }
    }
}
// 无限滚动

//监控滚动条的变化
//事件处理函数中，获取可视化窗口的高度和滚动条的高度
window.onscroll=function(){
    let height=window.innerHeight || document.documentElement.clientHeight
    let scrolltop=document.documentElement.scrollTop || document.body.scrollTop
    let totalTop=height+scrolltop
    if(totalTop>=videoHeight){
        waterFall()
    }
}

// window.onload=waterFall
window.addEventListener('load',waterFall)